<template>
  <div>
    <el-card class="card">
      <div class="box">
        <div class="card-top">
          <div class="card-r">
            <div class="card-title">{{ item.title }}</div>
            <div>
              <span class="character-l"> 作者：</span>
              <span class="character-r"> {{ item.name }}</span>
            </div>
            <div>
              <span class="character-l"> 类别：</span>
              <span class="character-r">
                {{ item.type }}
              </span>
            </div>
            <div>
              <span class="character-l"> 上传时间：</span>
              <span class="character-r">
                {{ item.time }}
              </span>
            </div>
          </div>
          <div class="card-l"></div>
        </div>
        <div class="card-center">
          <div></div>
          <div class="card-content">
            <span class="character-l">内容介绍：</span>
            <span class="character-r">
              {{ item.content }}
            </span>
          </div>
        </div>
        <div class="card-bottom">
          <div class="flex">
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                :content="`浏览量：${item.browseNum}`"
                placement="top"
              >
                <div>
                  <i class="el-icon-view"></i>
                  <span class="character-r">
                    {{ item.browseNum }}
                  </span>
                </div>
              </el-tooltip>
            </div>

            <div style="margin-left: 10px">
              <el-tooltip
                class="item"
                effect="dark"
                :content="`下载量：${item.downloadNum}`"
                placement="top"
              >
                <div>
                  <i class="el-icon-download"></i>
                  <span class="character-r">
                    {{ item.downloadNum }}
                  </span>
                </div>
              </el-tooltip>
            </div>
          </div>
          <div class="flex items-center">
            <el-button type="text">详情</el-button>
            <el-button type="text">修改</el-button>
            <el-button type="text" :loading="item.status">安装</el-button>
            <el-button type="text" :loading="item.status" class="unload"
              >卸载</el-button
            >
          </div>
        </div>
      </div>
      <!-- <div class="version">1.0</div> -->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: this.items,
      loading: true,
    };
  },
  props: {
    items: {
      type: Object,
      default: () => ({
        title: "插件名称", // 插件名称
        name: "作者", // 作者
        time: "2024-10-22 10:00:00", // 时间
        imgSrc: "", //图片地址
        type: "可执行类插件", //分类
        content:
          "这里是介绍的内容，介绍了插件的功能以简介，具体使用需要查看详这里是介绍的内容，介绍了插件的功能以简介，具体使用需要查看详情内容这里是介绍的内容，介绍了插件的功能以简介，具体使用需要查看详情内容这里是介绍的内容，介绍了插件的功能以简介，具体使用需要查看详情内容这里是介绍的内容，介绍了插件的功能以简介，具体使用需要查看详情内容这里是介绍的内容，介绍了插件的功能以简介，具体使用需要查看详情内容情内容",
        version: "1.0",
        browseNum: 1001,
        downloadNum: 200,
        status: false,
      }),
    },
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  height: 100%;
}

::v-deep .el-card__body {
  padding: 0;
}
.unload {
  color: #f56c6c;
}
.unload:hover {
  color: #f78989 !important;
}

.card {
  // width: 200px;
  height: 250px;
  margin: 10px 0 0 0;

  border-radius: 10px;
  position: relative;

  .version {
    position: absolute;
    width: 40px;
    top: 0;
    right: 0;
    // height: 10px;
    padding: 10px;
    // background-color: red;
  }
}

.box {
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;

  .card-top {
    display: flex;
    padding: 15px;

    .card-l {
      width: 100px;
      height: 100px;
      // background-color: #f2f3f5;
      border-radius: 8px;
      flex-shrink: 0;
      margin-left: 15px;
      background: url(../logo/logo.png) no-repeat;
      background-size: cover;
    }

    .card-r {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-between;

      div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .card-title {
        color: #333;
        font-weight: bold;
        font-size: 16px;
        /* Increased font size */
      }
    }
  }

  .card-center {
    flex: 1;
    padding: 3px 15px 10px;

    .card-content {
      line-height: 1.4;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* // 控制多行的行数 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .card-bottom {
    height: 50px;
    border-top: 1px solid #dcdfe6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
  }

  .character-l {
    color: #333;
    font-size: 14px;
    /* Adjusted font size */
  }

  .character-r {
    color: #666;
    font-size: 14px;
    /* Adjusted font size */
  }
}
</style>
